<template>
  <div class="detail-panel">
    <span><img src="~images/common/student_avatar.png" /></span>
    <span>{{info.admin_name}}</span>
    <span>{{info.admin_tel}}</span>
    <span>{{title}}</span>
    <span>{{info.admin_category}}</span>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default:'学生处',
    },
    info: {
      type: Object,
      default:()=>{},
    },
  },
}
</script>
<style lang="scss" scoped>
.detail-panel {
  position: relative;
  height: 60px;
  width: 100%;
  span {
    &:first-child {
      position: absolute;
      top: 12px;
      left: 24px;
      display: grid;
      place-items: center;
      width: 36px;
      height: 36px;
      border: 1px dashed #8c97b2;
      img {
        width: 100%;
        height: 100%;
        border-radius: 18px;
      }
    }
    &:nth-child(2) {
      position: absolute;
      top: 14px;
      left: 72px;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #002170;
    }
    &:nth-child(3) {
      position: absolute;
      top: 14px;
      right: 24px;
      font-size: 12px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #48dbbb;
    }
    &:nth-child(4) {
      position: absolute;
      top: 34px;
      left: 72px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #8c97b2;
    }
    &:nth-child(5) {
      position: absolute;
      bottom: 14px;
      right: 24px;
      font-size: 12px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #136fd1;
      line-height: 12px;
    }
  }
}
</style>